<template>
  <view class="card-container" >
    <view class="logo">
      <image src="../../static/images/logo.jpg" alt="Logo" />
    </view>
    <view class="card" @click="handleSelect('customer')">
      <span>我是客户</span>
      <wd-icon name="arrow-right" size="32rpx"></wd-icon>
    </view>
    <view class="card" @click="handleNurseClick">
      <span>我是护工</span>
      <wd-icon name="arrow-right" size="32rpx"></wd-icon>
    </view>
    <!-- <view class="card" @click="handleSelect('student')">
      <span>我是学员</span>
      <wd-icon name="arrow-right" size="32rpx"></wd-icon>
    </view> -->
  </view>
</template>

<script setup>

// onLoad(() => {
//   uni.hideTabBar()
// })

onUnload(() => {
  uni.showTabBar()
})

const handleSelect = (key) => {
  switch(key){
    case 'student':
      uni.navigateTo({ url: '/pages/student/index/index' })
      break;
    case 'nursing':
      uni.navigateTo({ url: '/pages/nurse-platform/index/index' })
      break;
    case 'customer':
      uni.switchTab({ url: '/pages/customer-platform/index/index' })
      break;
  }
  
}

const handleNurseClick = () => {
  // 检查登录状态
  const isLoggedIn = uni.getStorageSync('nurseisLoggedIn');
  if (!isLoggedIn) {
    uni.navigateTo({ url: '/pages/login/index' });
  } else {
    uni.navigateTo({ url: '/pages/nurse-platform/index/index' });
  }
};
</script>

<style scoped lang="scss">
.card-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 46rpx;
  height: 100vh;
  background-color: #f7f7f7;

  .logo {
    margin-top: 16vh;
    margin-bottom: 6rpx;
    border-radius: 2rpx;
    overflow: hidden;

    & > image {
      width: 260rpx;
      height: 260rpx;
    }
  }



  .card {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    padding: 36rpx 0;
    background: #f7d54d;
    border-radius: 36rpx;
    box-shadow: rgba(27, 27, 27, 0.09) 0px 2px 12px 1px;

    span {
      z-index: 2;
      font-size: 36rpx;
      font-weight: 600;
      letter-spacing: 4rpx;
    }

    .wd-icon {
      margin-left: 16rpx;
      color: #424141;
      transform: translateY(2rpx);
    }
  }

  .disabled {
    background: #dfdbdb;
  }
}
</style>
